<template>
  <div id="tp-hotel" class="row col-12">
    <div class="card col-6">
      <table class="table table-sm">
        <caption>
          同一职位级别只能有一条记录
        </caption>
        <tr>
          <th>职位级别</th>
          <th>用车类型</th>
          <th>备注</th>
          <th></th>
        </tr>
        <tr v-for="info of carTps">
          <td>{{ info.positionName }}</td>
          <td>{{ info.vehicleGroupName }}</td>
          <td>{{ info.remark }}</td>
          <td>
            <button
              class="btn btn-sm btn-danger"
              @click.stop="deleteTp(info.id)"
            >
              删除
            </button>
          </td>
        </tr>
      </table>
    </div>
    <div class="card col-6">
      <div class="card-body">
        <form class="form-horizontal">
          <div class="row mb-2">
            <label class="control-label col-3 text-end"
              ><strong>员工级别</strong></label
            >
            <div class="col-6">
              <select
                class="form-select form-control-sm"
                v-model.number="positionId"
              >
                <option :value="info.id" v-for="info of positions">
                  {{ info.name }}
                </option>
              </select>
            </div>
          </div>
          <div class="row mb-2">
            <label class="control-label col-3 text-end"
              ><strong>车型</strong></label
            >
            <div class="col-6">
              <select
                class="form-select form-control-sm"
                v-model.number="vehicleGroupId"
              >
                <option :value="info.id" v-for="info of vehicleGroups">
                  {{ info.name }}
                </option>
              </select>
            </div>
          </div>
          <div class="row mb-2">
            <label class="control-label col-3 text-end">备注</label>
            <div class="col-6">
              <input type="input" class="form-control" v-model.trim="remark" />
              <span class="small text-muted"></span>
            </div>
          </div>
          <div class="row">
            <button
              id="btnChange"
              type="button"
              class="btn btn-primary  col-4 offset-4"
              @click.stop="save()"
            >
              保存
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  searchCustomerPositions,
  saveCarTp,
  searchCarTps,
  deleteCarTp,
} from "@/api/customer.js";
import { searchVehicleGroupInfos } from "@/api/basic-data.js";

export default {
  props: {
    customerId: {
      type: Number,
    },
  },
  data() {
    return {
      positions: [],
      vehicleGroups: [],

      carTps: [],

      positionId: 0,
      vehicleGroupId: 0,
      remark: "",
    };
  },
  watch: {
    customerId: function (newVal) {
      this.search();
    },
  },
  mounted: function () {
    if (this.customerId > 0) {
      this.search();
      this.searchCarTps();
    }
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (msg) {
      this.$store.dispatch("showLoading", { loadingText: msg });
    },
    hideLoading: function () {
      this.$store.dispatch("hideLoading");
    },
    search: function () {
      searchCustomerPositions(this.customerId, (v) => {
        this.positions = v.dataList;
      });
      searchVehicleGroupInfos(null, (v) => {
        this.vehicleGroups = v.dataList;
      });
    },
    save: function () {
      if (this.positionId === 0) {
        this.showErrMsg("员工级别", "danger");
        return;
      }
      const params = {
        positionId: this.positionId,
        vehicleGroupId: this.vehicleGroupId,
        remark: this.remark,
      };

      saveCarTp(this.customerId, params, (v) => {
        if (v.status === "OK") {
          this.showErrMsg("保存成功");
          this.searchCarTps();
        } else {
          this.showErrMsg(v.errmsg, "danger");
        }
      });
    },
    deleteTp: function (id) {
      deleteCarTp(this.customerId, id, (v) => {
        if (v.status === "OK") {
          this.showErrMsg("操作成功");
          this.searchCarTps();
        } else {
          this.showErrMsg(v.errmsg, "danger");
        }
      });
    },
    searchCarTps: function () {
      const params = {
        "sc.pageNo": 1,
        "sc.pageSize": 100,
      };

      searchCarTps(this.customerId, params, (v) => {
        // console.log(v)
        this.carTps = v;
      });
    },
  },
};
</script>